<template>
    <div>
        <p>
        <span>{{ location.name }}实时天气</span>
        </p>
        <p>观测时间：{{ timeM }}</p>
        <div>
            <p><i :class="iconName"></i></p>
            <p>温度：{{ lis.temp }}</p>
            <p>体感温度：{{ lis.feelsLike }}</p>
        </div>
    </div>
</template>

<script>
    import dayjs from 'dayjs';
    import { api_now, key } from '../common/constrant'
    import axios from 'axios';
    import "qweather-icons/font/qweather-icons.css"

    export default{
        data(){
            return{
                lis:[],
            }
        },

        computed:{
            location:function(){
                return this.$store.state.location
            },
            timeM:function(){
                return dayjs(this.lis.obsTime).format("YYYY年MM月DD日 HH时mm分")
            },
            iconName:function(){
                return "qi-" + this.lis.icon
            }
        },

        mounted(){
            this.getDate()
        },

        methods:{
            getDate(){
                // console.log(1)
                // console.log(this)
                axios.get(api_now,{
                    params:{
                        location:this.location.id,
                        key:key,
                    }
                }).then(res => {
                    this.lis = []
                    // console.log(res)
                    this.lis = res.data.now
                    // console.log(this.iconName)
                })
            }
        },

        watch:{
            location:function(){
                this.getDate()
            }
        }
    }
</script>